<template>
  <div class="box">
    <van-image
      width="60vw"
      fit="cover"
      position="center"
      :src="require('../../assets/img/logo2.png')"
    />
    <van-cell-group inset>
      <van-field
        class="tt"
        v-model="uersInfo.phone"
        name="手机号"
        placeholder="手机号"
        :rules="[{ required: true, message: '请填写手机号' }]"
      />
      <van-field
        class="tt"
        v-model="uersInfo.password"
        name="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '密码' }]"
      />
      <van-field
        v-model="yzm"
        center
        clearable
        color="red"
        placeholder="请输入短信验证码"
      >
        <template #button>
          <van-button size="small" color="darkgray" @click="yanzhengma"
            >发送验证码</van-button
          >
        </template>
      </van-field>
    </van-cell-group>
    <div class="zhuce" @click="zhuce">还没账号？去注册</div>
    <div style="margin: 16px; width: 80vw">
      <van-button
        round
        block
        color="darkgray"
        native-type="submit"
        @click="denglu"
      >
        提交
      </van-button>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Toast } from "vant";

Vue.use(Toast);
import { denglu, sms } from "../../request/api.js";
export default {
  data() {
    return {
      yzm: "",
      msg: "1",
      uersInfo: {
        phone: "",
        password: "",
      },
    };
  },
  methods: {
    zhuce() {
      this.$router.push('/register')
    },
    yanzhengma() {
      sms(this.phone).then((d) => {
        this.msg = d.data.list.code;
        console.log(d);
        setTimeout(() => {
          this.$toast({
            message: "验证码:" + this.msg,
            icon: "envelop-o",
          });
        }, 1000);
      });
    },
    denglu() {
      denglu(this.uersInfo)
        .then((d) => {
          if (d.data.code == 200) {
            //将用户身份信息保存在本地localStorage中：
            localStorage["appUser"] = JSON.stringify(d.data.list);
            if (this.yzm == this.msg) {
              const toast = Toast.loading({
                duration: 0, // 持续展示 toast
                forbidClick: true,
                message: "登陆成功",
              });
              let second = 1;
              const timer = setInterval(() => {
                second--;
                if (second) {
                  toast.message = `${second}秒后自动跳转...`;
                } else {
                  clearInterval(timer);
                  // 手动清除 Toast
                  Toast.clear();
                }
              }, 1000);
              setTimeout(() => {
                this.$router.push("/home");
              }, 1000);
            } else {
              Toast.fail("验证码错误");
            }
          } else {
            Toast.fail(d.data.msg);
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>

<style scoped>
.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  border: 2px solid darkgray;
}
.tt {
  margin-top: 10px;
}
input {
  color: #de0002;
}
input::-webkit-input-placeholder {
  color: red;
}
.zhuce{
  font-size: 13px;
  text-align: right;
  color: #ff6041;
}
</style>